<template>
   <div class="container">
        <div class='edit' v-if="isEdit">
            <h1>编辑律师信息</h1>
            <div class='item-box'>
                <div class='item'>
                    <label for="">律师姓名</label>
                    <div class='right'>
                        <el-input type="text" clearable v-model="name" />
                    </div>
                </div>
                <div class='item'>
                    <label for="">身份证号</label>
                    <div class='right'>
                        <el-input type="text" clearable v-model="idCardNo" />
                    </div>
                </div>
                <div class='item'>
                    <label for="">性别</label>
                    <div class='right'>
                        <el-select v-model="gender" clearable placeholder="">
                            <el-option
                            v-for="item in sexList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class='item'>
                    <label for="">常用邮箱</label>
                    <div class='right'>
                        <el-input type="text" clearable v-model="email" />
                    </div>
                </div>
                <div class='item'>
                    <label for="">微信</label>
                    <div class='right'>
                        <el-input type="text" clearable v-model="wechatId" />
                    </div>
                </div>
                <div class='item'>
                    <label for="">执业证号</label>
                    <div class='right'>
                        <el-input type="text" clearable v-model="licenseNo" />
                    </div>
                </div>
                <div class='item'>
                    <label for="">所在地区</label>
                    <div class='right'>
                        <Region @getRegion='getRegion' ref='region' />
                    </div>
                </div>
                <div class='item'>
                    <label for="">擅长专长</label>
                    <div class='right'>
                        <CaseTypeSelect class='skill' @getCaseType='getSkill1' ref='skill1' placeholder='第一技能' />
                        <CaseTypeSelect class='skill' @getCaseType='getSkill2' ref='skill2' placeholder='第二技能' />
                        <CaseTypeSelect class='skill' @getCaseType='getSkill3' ref='skill3' placeholder='第三技能'/>
                    </div>
                </div>
                <div class='item'>
                    <label for="">执业律所</label>
                    <div class='right'>
                        <el-input type="text" clearable v-model="lawfirmName" placeholder="执业律所" />
                    </div>
                </div>
                <div class='item'>
                    <label for="">详细地址</label>
                    <div class='right'>
                        <el-input type="text" clearable v-model="address" />
                    </div>
                </div>
                
            </div>
            <div class='img-box f-pbt20'>
                <label for="">简介</label>
                <div class='img-group' style="width: 600px">
                    <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="desc"></el-input>
                </div>
            </div>
            <div class='upload-group'>
                <label for="">图片信息</label>
                <div class='upload-box'>
                    <div class='upload-item'>
                        <div class="u-upload">
                            <input
                            type="file"
                            @change="upfile1"
                            name="file"
                            id="file1"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            class="u-upload-file"
                            >
                            <label for="file1" class="btn btn-success">
                            <img v-if="idCardFront" :src="idCardFront" alt="">
                            <i v-else class='el-icon-plus'></i>
                            </label>
                        </div>
                        <p>身份证正面</p>
                    </div>
                    <div class='upload-item f-mlt20'>
                        <div class="u-upload">
                            <input
                            type="file"
                            @change="upfile2"
                            name="file"
                            id="file2"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            class="u-upload-file"
                            >
                            <label for="file2" class="btn btn-success">
                            <img v-if="idCardBack" :src="idCardBack" alt="">
                            <i v-else class='el-icon-plus'></i>
                            </label>
                        </div>
                        <p>身份证反面</p>
                    </div>
                    <div class='upload-item f-mlt20'>
                        <div class="u-upload">
                            <input
                            type="file"
                            @change="upfile3"
                            name="file"
                            id="file3"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            class="u-upload-file"
                            >
                            <label for="file3" class="btn btn-success">
                            <img v-if="certificatePic" :src="certificatePic" alt="">
                            <i v-else class='el-icon-plus'></i>
                            </label>
                        </div>
                        <p v-gallery >执业照</p>
                    </div>
                </div>
            </div>
            <div class='footer'>
                <el-button @click="onSubmit" type="primary">提交</el-button>
            </div>
        </div>
        
        <div class='detail' v-else>
            <div class='detail-hd flex'>
                <el-button @click="goBack" type="primary"><i class='el-icon-d-arrow-left' />返回</el-button>
                <h1 class='f-plt20'>律师详情</h1>
            </div>
            <div class='item-box'>
                <div class='item'>
                    <label for="">律师姓名</label>
                    <div class='right'>{{lawyer.name}}</div>
                </div>
                <div class='item'>
                    <label for="">身份证号</label>
                    <div class='right'>{{lawyer.idCardNo}}</div>
                </div>
                <div class='item'>
                    <label for="">性别</label>
                    <div class='right'>{{lawyer.gender == 'male' ? '男' : '女'}}</div>
                </div>
                <div class='item'>
                    <label for="">常用邮箱</label>
                    <div class='right'>{{lawyer.email}}</div>
                </div>
                <div class='item'>
                    <label for="">微信</label>
                    <div class='right'>{{lawyer.wechatId}}</div>
                </div>
                <div class='item'>
                    <label for="">执业证号</label>
                    <div class='right'>{{lawyer.licenseNo}}</div>
                </div>
                <div class='item'>
                    <label for="">所在地区</label>
                    <div class='right'>{{lawyer.provinceName}} {{lawyer.cityName}}</div>
                </div>
                <div class='item'>
                    <label for="">擅长专长</label>
                    <div class='right'>{{lawyer.skillFirstName}} {{lawyer.skillSecondName}} {{lawyer.skillThirdName}}</div>
                </div>
                <div class='item'>
                    <label for="">执业律所</label>
                    <div class='right'>{{lawyer.lawfirmName}}</div>
                </div>
                <div class='item'>
                    <label for="">详细地址</label>
                    <div class='right'>{{lawyer.address}}</div>
                </div>
            </div>
            <div class='img-box f-pbt20'>
                <label for="">简介</label>
                <div class='img-group desc'>{{lawyer.desc}}</div>
            </div>
            <div class='img-box'>
                <label for="">图片信息</label>
                <div class='img-group flex'>
                    <figure>
                        <img v-gallery :src="lawyer.idCardFront" alt="身份证正面" />
                        <figcaption>身份证正面</figcaption>
                    </figure>
                    <figure>
                        <img v-gallery :src="lawyer.idCardBack" alt="身份证反面" />
                        <figcaption>身份证反面</figcaption>
                    </figure>
                    <figure>
                        <img v-gallery :src="lawyer.certificatePic" alt="执业照" />
                        <figcaption>执业照</figcaption>
                    </figure>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Region from '../../components/Region'
import CaseTypeSelect from '../../components/CaseTypeSelect'
export default {
  name: 'LawyerDetail',
  components: {
      'Region': Region,
      'CaseTypeSelect': CaseTypeSelect
  },
  data() {
    return {
        isEdit: false,
        userId: null,
        lawyer: {}, 
        name: '',
        gender: '',
        idCardNo: '',
        email: '',
        wechatId: '',
        licenseNo: '',
        province: '',
        city: '',
        skillFirst: '',
        skillSecond: '',
        skillThird: '',
        lawfirmName: '',
        address: '',
        desc: '',  // 简介
        idCardBack: '',
        idCardFront: '',
        certificatePic: '', // 资质照片url
        sexList: [
            {
                label: '男',
                value: 'male'
            },
            {
                label: '女',
                value: 'female'
            }
        ]
    }
  },
  created() {
      console.log('this.router::', this.$route);
      if(this.$route.params.editId) {  // 编辑模式
        this.getLawyerDetail(this.$route.params.editId);
        this.isEdit = true;
        this.userId = this.$route.params.editId;
      }
      if(this.$route.params.id) { // 详情模式
        this.isEdit = false;
        this.getLawyerDetail(this.$route.params.id);
        this.userId = this.$route.params.id;
      }
  },
  methods: {
    // 上传身份证正面
    upfile1(event) {
        this.upfile(event, 'idCardFront');
    },
    // 上传身份证反面
    upfile2(event) {
        this.upfile(event, 'idCardBack');
    },
    // 上传执业照
    upfile3(event) {
        this.upfile(event, 'certificatePic');
    },
    // 上传图片
    upfile(event, type) {
      const files = event.target.files;
      const form = new FormData();
      form.append("file", files[0]);
      form.append("dir", "lawfirm");
      form.append("type", "1");
   
      this.$store.dispatch("UPLOAD_FILE", form).then(res => {
        console.log("res::::up:::", res);
        if(res.data.retCode == 0) {
          this.$message.success('上传成功！');
          switch(type) {
              case 'idCardFront':
                this.idCardFront = res.data.data;
                break;
              case 'idCardBack':
                this.idCardBack = res.data.data;
                break;
              case 'certificatePic':
                this.certificatePic = res.data.data;
                break;
          }
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      });
    },
    // 获取技能1
    getSkill1(skill) {
        this.skillFirst = skill;
    },
    // 获取技能2
    getSkill2(skill) {
        this.skillSecond = skill;
    },
    // 获取技能3
    getSkill3(skill) {
        this.skillThird = skill;
    },
    getRegion(region) {
        if(region.hasOwnProperty('province')) {
            this.province = region.province.id;
        } else {
            this.province = '';
        }
        if(region.hasOwnProperty('city')) {
            this.city = region.city.id;
        } else {
            this.city = '';
        }
    },
    // 返回
    goBack() {
        this.$router.go(-1);
    },
    // 编辑提交按钮点击事件
    onSubmit() {
        this.updateLawyer();
    },
    // 律师信息更新
    updateLawyer() {
        this.$store.dispatch('UPDATE_LAWYER', {
            userId: this.userId,
            name: this.name,
            idCardNo: this.idCardNo,
            gender: this.gender,
            email: this.email,
            wechatId: this.wechatId,
            licenseNo: this.licenseNo,         
            province: this.province,
            city: this.city,
            desc: this.desc,
            skillFirst: this.skillFirst,
            skillSecond: this.skillSecond,
            skillThird: this.skillThird,
            address: this.address,
            lawfirmName: this.lawfirmName,
            idCardFront: this.idCardFront,
            idCardBack: this.idCardBack,
            certificatePic: this.certificatePic,
        }).then(res => {
            if(res.data.retCode == 0) {
                this.$message.success('编辑成功！');
                this.$router.push('/home/lawyer');
            } else {
                res.data.errorMsg && this.$message.warning(res.data.errorMsg);
            }
        })
    },
    // 获取律师详情
    getLawyerDetail(lawyerId) {
        this.$store.dispatch('GET_LAWYER_BY_ID', {
            id: lawyerId,
        }).then(res => {
            if(res.data.retCode == 0) {
                if(this.isEdit) {
                const lawyer = res.data.data;
                this.name = lawyer.name;
                this.idCardNo = lawyer.idCardNo;
                this.gender = lawyer.gender;
                this.email = lawyer.email;
                this.wechatId = lawyer.wechatId;
                this.licenseNo = lawyer.licenseNo;
                this.skillFirst = lawyer.skillFirst;
                this.skillSecond = lawyer.skillSecond;
                this.skillThird = lawyer.skillThird;
                this.lawfirmName = lawyer.lawfirmName;
                this.address = lawyer.address;
                this.idCardFront = lawyer.idCardFront;
                this.idCardBack = lawyer.idCardBack;
                this.desc = lawyer.desc;
                this.certificatePic = lawyer.certificatePic;
                this.$refs.skill1.setValue(lawyer.skillFirst);
                this.$refs.skill2.setValue(lawyer.skillSecond);
                this.$refs.skill3.setValue(lawyer.skillThird);
                this.$refs.region.setValueById(lawyer.province, lawyer.city);
                } else {
                this.lawyer = res.data.data;
                }
            } else {
            res.data.errorMsg && this.$message.warning(res.data.errorMsg);
            }
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.skill{
    width: 100px;
}
h1{
    font-size: 24px;
    color: #333;
}
.item-box{
    display: flex;
    flex-wrap: wrap;
}
.item, .img-box, .upload-group{
    display: flex;
}
.item>label, .img-box>label, .upload-group>label{
    width: 100px;
    /* line-height: 40px; */
    font-size: 16px;
    text-align: right;
    padding-right: 20px;
    color: #999;
}
.img-group>figure{
    width: 200px;
    margin-right: 20px;
}
.img-group>figure>img{
    width: 200px;
    height: 120px;
    display: block;
    margin-bottom: 10px;
}
.img-group>figure>figcaption{
    font-size: 12px;
    color: #666;
}
/* edit */
.edit h1{
    padding: 20px 0;
}
.edit .item>label, .edit .upload-group>label{
    line-height: 40px;
}
.edit .item{
    width: 400px;
    margin-bottom: 20px;
}
.upload-box{
    display: flex;
    flex: 1;
}
.footer{
    padding: 40px 0 20px 100px;
}
/* detail */
.detail-hd{
    line-height: 40px;
    padding: 20px 0;
}
.detail .item{
    width: 300px;
    margin-bottom: 10px;
}
.detail .item>.right, .detail .desc{
    line-height: 28px;
    font-size: 16px;
}
.detail .item>label, .detail .img-box>label{
    line-height: 28px;
}
</style>
